import { MciLabel, MciButton } from '@/components/base';
import { createGraphNode } from '@/utils/graph';
import { Graph } from '@antv/x6';
import { Dnd } from '@antv/x6-plugin-dnd';
import { PropType } from 'vue';
import { BatchNode } from '../Nodes/Batch';
import { DataLoadNode } from '../Nodes/DataLoad';
import { EndNode } from '../Nodes/End';
import { Manual } from '../Nodes/Manual';
import { ModelNode } from '../Nodes/Model';
import { RuleNode } from '../Nodes/Rule';
import { AutomaticNode } from '../Nodes/AutomaticNode';
import { FeatureNode } from '../Nodes/FeatureNode';
import { StartNode } from '../Nodes/Start';
import { useGraph } from '@/hooks/useGraph';
import './index.scss';
import FlowTools from '@/views/decision-flow/components/FlowTools';

export const Template = defineComponent({
  props: {
    graph: {
      type: Object as PropType<Graph>,
      default: null
    }
  },
  setup(props) {
    const { interactingState } = useGraph();
    const el = ref<HTMLDivElement | null>(null);
    let dnd = shallowRef<Dnd | null>(null);

    const unfold = ref(true);
    const unfoldClick = () => {
      unfold.value = !unfold.value;
    };

    watch(
      () => props.graph,
      () => {
        const { graph } = props;
        if (!graph || !el.value) {
          return;
        }
        dnd.value = new Dnd({
          target: graph,
          scaled: false,
          dndContainer: el.value! as HTMLElement,
          validateNode() {
            return true;
          }
        });
      }
    );

    const startDrag = (e: any, data: any) => {
      const { nodeType } = data;
      const node = createGraphNode(props.graph, nodeType, data);
      dnd.value?.start(node, e);
    };

    return () => (
      <div ref={el} class={interactingState.value ? 'pt-8 px-12 bg-gray-50 template-node-list rounded-8px' : ''}>
        {interactingState.value && (
          <div class="report-switch flex justify-between h-32">
            <FlowTools />
            <MciButton type="primary" link={true} class="ml-16" onClick={unfoldClick}>
              <span>{unfold.value ? '收起节点' : '展开节点'}</span>
              {unfold.value ? <i class="mci-icon-chevron-up ml-8px"></i> : <i class="mci-icon-chevron-down ml-8px"></i>}
            </MciButton>
          </div>
        )}
        {interactingState.value && unfold.value ? (
          <div class="flex flex-row gap-12 mt-8" style="flex-wrap: wrap;">
            {/* 开始节点 */}
            <StartNode isFromNodeList onMousedown={startDrag} />
            {/* 数据加载 */}
            <DataLoadNode isFromNodeList onMousedown={startDrag} />
            {/* 模型加载 */}
            <ModelNode isFromNodeList onMousedown={startDrag} />
            {/* 规则节点 */}
            <RuleNode isFromNodeList onMousedown={startDrag} />
            {/* 分支节点 */}
            <BatchNode isFromNodeList onMousedown={startDrag} />
            {/* 人工节点 */}
            <Manual isFromNodeList onMousedown={startDrag} />
            {/* 自动处理节点 */}
            <AutomaticNode isFromNodeList onMousedown={startDrag} />
            {/* 特征节点 */}
            <FeatureNode isFromNodeList onMousedown={startDrag} />
            {/* 结束节点 */}
            <EndNode isFromNodeList onMousedown={startDrag} />
          </div>
        ) : null}
      </div>
    );
  }
});
